<template>
  <div class="recipient p-4">
    <BasicForm @register="registerForm" />
  </div>
</template>
<script lang="ts" setup name="recipient">
  import { basicSchemas } from './recipient.data';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { computed, watch, nextTick } from 'vue';
  import modelerStore from '/@/store/modules/bpmnModeler';
  const modeler = modelerStore();
  const props = defineProps({
    tabType: Number,
  });
  const [registerForm, { setFieldsValue, removeSchemaByField, appendSchemaByField }] = useForm({
    layout: 'vertical',
    schemas: basicSchemas,
    showActionButtonGroup: false,
  });

  const configuration = computed(() => modeler.getConfiguration);
  const nodeItem = computed(() => modeler.nodeItem);
  watch(
    () => modeler.getActiveId,
    () => {
      // console.log(
      //   '%cnodeItem.value===>26： ',
      //   'background: rgb(23, 197, 237,.6); color: #ff5023; font-size:18px;font-weight:700',
      //   nodeItem.value,
      // );

      nextTick(() => {
        setFieldsValue({
          R0: nodeItem.value?.R0,
          participants: nodeItem.value?.participants,
          caculateReturnFlag: nodeItem.value?.participant?.caculateReturnFlag,
          caculateFormula: nodeItem.value?.participant?.caculateFormula,
          participantRange: nodeItem.value?.participant?.participantRange,
        });
      });
    },
  );
  watch(
    () => props.tabType,
    (val) => {
      if (val === 3) {
        const roles = configuration.value.roles.map((i) => ({
          label: i.roleName,
          value: i.roleId,
          code: i.roleId,
          roleType: i.roleType,
        }));
        removeSchemaByField('R0');
        nextTick(() => {
          appendSchemaByField(
            {
              field: `R0`,
              component: 'Select',
              label: '流转角色',
              colProps: {
                span: 24,
              },
              componentProps: {
                options: roles,
                labelInValue: true,
                mode: 'multiple',
                onChange: (e) => {
                  setTimeout(() => {
                    modeler.setActivitiesItem(modeler.getActiveId, 'R0', e);
                  });
                },
              },
            },
            '',
            true,
          );
        });
      }
    },
  );
  // const nodeItem = computed(() => modeler.nodeItem);

  // watch(
  //   () => modeler.getActiveId,

  //   () => {},
  // );
</script>
<style lang="less" scoped>
  .recipient {
    overflow-y: auto;
    height: calc(100% - 78px);
  }
</style>
